<template>
  <div class="container-fluid">
    <div class="row school-model school-tiao">
      <div class="col school-tiao-left">
        <span>{{ $route.name }}</span>
      </div>
      <div class="col-8 text-center">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-select size="mini" v-model="address" placeholder="请选择">
              <el-option label="全部校区" :value="0"></el-option>
              <el-option
                v-for="(item,i) in getschooladdress"
                :key="`1businessprofile${i}`"
                :label="item.name"
                :value="item.ID"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-radio-group size="mini" v-model="starttime">
              <el-radio-button :label="ntime.w">本周</el-radio-button>
              <el-radio-button :label="ntime.m">本月</el-radio-button>
              <el-radio-button :label="ntime.y">本年</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div class="col text-center">
        <a-button @click="start" type="primary">统计</a-button>
      </div>
    </div>
    <div class="row school-model index-model">
      <div class="col school-col-table">
        <el-tabs v-model="activeName" type="border-card">
          <el-tab-pane label="新增学员数" name="1">
            <v-chart :forceFit="true" v-if="activeName == 1" :height="height" :data="data.student">
              <v-tooltip />
              <v-axis />
              <v-bar position="x*value" />
            </v-chart>
          </el-tab-pane>
          <el-tab-pane label="新开班级数" name="2">
            <v-chart v-if="activeName == 2" :forceFit="true" :height="height" :data="data.clazz">
              <v-tooltip />
              <v-axis />
              <v-bar position="x*value" />
            </v-chart>
          </el-tab-pane>
          <el-tab-pane label="学员课时完成数" name="3">
            <v-chart v-if="activeName == 3" :forceFit="true" :height="height" :data="data.hour">
              <v-tooltip />
              <v-axis />
              <v-bar position="x*value" />
            </v-chart>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { asyncgetbusinessprofile } from "../../../../plugins/api.js";
import { groupBy, mapObject } from "underscore";
import * as moment from "moment";
import { setname } from "../../../utils.js";
export default {
  name: "businessprofile",
  created() {
    this.starttime = this.ntime.y;
  },
  data() {
    return {
      address: 0,
      starttime: "",
      starttiemtype: "年",
      activeName: "1",
      tab: [],
      height: 400,
      width: 500,
      data: {
        student: [],
        clazz: [],
        hour: []
      }
    };
  },
  computed: {
    ...mapGetters(["getschooladdress"]),
    ntime() {
      let d = new Date();
      const y = `${d.getFullYear()}/1/1`;
      const m = `${d.getFullYear()}/${d.getMonth() + 1}/1`;
      const w =
        d.getTime() - 1000 * 60 * 60 * 24 * (d.getDay() ? d.getDay() - 1 : 6);
      return {
        y: new Date(y),
        m: new Date(m),
        w: new Date(new Date(w).toLocaleDateString())
      };
    }
  },
  async mounted() {
    this.width =
      document.getElementsByClassName("el-tab-pane")[0].offsetWidth - 100;
    await this.start();
  },
  methods: {
    async start() {
      if (this.starttime == this.ntime.y) {
        this.starttiemtype = "年";
      } else if (this.starttime == this.ntime.m) {
        this.starttiemtype = "月";
      } else {
        this.starttiemtype = "日";
      }
      this.tab = await asyncgetbusinessprofile({
        address: this.address,
        starttime: this.starttime
      });
      this.data = this.setdata();
    },
    setdata() {
      const { tab, starttiemtype } = this;
      let day = new Date();
      const ntime = `${day.getFullYear()}/${day.getMonth() + 1}/1`;
      const student = []; // 学生
      const clazz = []; // 班级
      const hour = []; // 课时
      for (let v of tab) {
        const { schoolstudent, schoolclazz } = v;
        student.push(...schoolstudent);
        clazz.push(...schoolclazz);
      }
      for (let v of student) {
        const { schoolclazzstudentcalendar } = v;
        hour.push(...schoolclazzstudentcalendar);
      }
      // 学生数量
      const by = createdAt => {
        if (starttiemtype === "年") {
          return new Date(createdAt).getMonth();
        } else if (starttiemtype === "月") {
          // 本月一号
          const m = ntime;
          // 本月1号第几周
          const thism = moment(new Date(m)).week();
          // 当前第几周
          const atweek = moment(createdAt).week();
          return atweek - thism;
        } else {
          const x = new Date(createdAt).getDay();
          if (x === 0) {
            return 6;
          }
          return x - 1;
        }
      };
      const s = groupBy(student, v => by(v.createdAt));
      // 班级数量
      const c = groupBy(clazz, v => by(v.createtime));
      // 课时数量
      let h = groupBy(hour, v => by(v.createdAt));
      h = mapObject(h, v => {
        let length = 0;
        for (let i of v) {
          length += i.hour;
        }
        return {
          length
        };
      });
      let d = 12;
      let name = "月";
      if (starttiemtype === "年") {
        d = 12;
        name = "月";
      } else if (starttiemtype === "月") {
        d = 5;
        name = "周";
      } else {
        d = 7;
        name = "天";
      }
      const s2 = [];
      const c2 = [];
      const h2 = [];
      // 生成图表数据 {x, vlaue} x轴数据
      for (let i = 0; i < d; i++) {
        if (s[i]) {
          s2.push({ x: setname(i, name), value: s[i].length });
        } else {
          s2.push({ x: setname(i, name), value: 0 });
        }
        if (c[i]) {
          c2.push({ x: setname(i, name), value: c[i].length });
        } else {
          c2.push({ x: setname(i, name), value: 0 });
        }
        if (h[i]) {
          h2.push({ x: setname(i, name), value: h[i].length });
        } else {
          h2.push({ x: setname(i, name), value: 0 });
        }
      }
      return {
        student: s2,
        clazz: c2,
        hour: h2
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.index-model {
  margin-top: 13px;
}
.span {
  display: inline-block;
  width: 10px;
  height: 21px;
}
</style>